<template>
  <div class="canvas_area" ref="canvasArea">
    <canvas class="canv" :id="this.id" width="280px" height="280px"></canvas>
  </div>
</template>
<script>
export default {
  name: "MyLoadingView",
  data() {
    return {
      title: "环形进度条",
      canvas: "",
      cacheCanvas: "",
      keepprate: " ", //该进度条的数据
      id: "myLoading",
      context: "",
      cirX: 0,
      cirY: 0,
      cirR: 0,
      ratio: "",
      rad: 1,
      ballR: 8,
      timer: "",
      tempRatio: 25,
      startAngle: 0,
      speed: 1, //加速速度
      width: "",
      height: "",
      rate: "100",
      speed2: 1.5, //减速速度
    };
  },
  mounted() {
    this.rad = (Math.PI * 2) / 100;
    console.log("rad = ", this.rad);
    //获取画布的宽高
    this.width = 280; // document.getElementById(this.id).offsetWidth;
    this.height = 280; //document.getElementById(this.id).offsetHeight;

    //设置圆心
    this.cirX = this.width / 2;
    this.cirY = this.height / 2;
    //设置圆的半径
    this.cirR = 125;
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      if (!this.cacheCanvas) {
        this.cacheCanvas = document.createElement("canvas");
        this.cacheCanvas.width = this.width;
        this.cacheCanvas.height = this.height;
      }
      this.context = this.cacheCanvas.getContext("2d");
      this.context.save();
      this.context.clearRect(
        0,
        0,
        this.canvas.width + 1,
        this.canvas.height + 1
      );
      // this.drawBottomCircle();
      this.context.restore();
      this.canvas = document.getElementById(this.id);
      this.context = this.canvas.getContext("2d");
      this.context.clearRect(
        0,
        0,
        this.canvas.width + 1,
        this.canvas.height + 1
      );
      // this.context.drawImage(
      //   this.cacheCanvas,
      //   0,
      //   0,
      //   this.canvas.width,
      //   this.canvas.height
      // );
      if (this.rate > 0) {
        console.log("requestAnimationFrame");
        window.requestAnimationFrame(this.drawFrame, this.canvas);
      } else {
        this.drawBottomCircle();
        this.fillTextContent("--");
      }
    },
    drawBottomCircle() {
      this.context.beginPath();
      this.context.strokeStyle = "rgb(254,255,255)";
      this.contextlineWidth = "8";
      this.context.arc(this.cirX, this.cirY, this.cirR, 0, 2 * Math.PI, false);
      this.context.stroke();
      this.context.closePath();
    },
    drawTopFillPath(n) {
      if (this.rate >= 0) {
        n = Math.floor(n);
        // if (n > 50) n = n - 3;
        let startAngle = this.startAngle;
        let endAngle = this.startAngle + n * this.rad;
        const unit = 0.05;
        let division = parseInt((endAngle - startAngle) / unit, 10);
        let gradient = this.gradientColor(
          // [255, 187, 165],
          // [255, 89, 38],
          [255, 255, 255],
          [37, 79, 247],
          // [37, 79, 247],
          // [37, 79, 247],

          division
        );
        let start = startAngle;
        let end = start;
        for (let i = 0; i < division; i++) {
          this.context.beginPath();
          this.context.lineCap = "round";
          end = start + unit;
          this.context.lineWidth = "22";
          this.context.strokeStyle = gradient[i];
          this.context.arc(this.cirX, this.cirY, this.cirR, start, end);
          this.context.stroke();
          start += unit;
        }
        this.startAngle += (Math.PI * 2) / 100;
      }
    },
    drawTopFillBall() {
      if (this.rate > 0) {
        this.context.fillStyle = "#ffffff";
        this.context.beginPath();
        let rad = 247.5;
        let x = Math.cos(rad) * this.cirR + 21;
        let y = Math.sin(rad) * this.cirR + 19;
        this.context.arc(
          x + this.cirX,
          this.cirY - y,
          this.ballR,
          1,
          0,
          2 * Math.PI
        );
        this.context.closePath();
        this.context.fill();
      }
    },
    fillTextContent(n) {
      if (n !== "--") {
        n = n.toFixed(2) + "%";
      }
      this.context.fillStyle = "rgb(255,87,34)";
      this.context.font = "38px ArialMT";
      this.context.textAlign = "center";
      this.context.textBaseline = "middle";
      this.context.fillText(n, this.cirX, this.cirY - 12);
      this.context.fillStyle = "rgb(153,153,153)";
      this.context.font = "24px HiraginoSansGB-W3";
      this.context.fillText("进度", this.cirX, this.cirY + 37);
    },
    drawFrame() {
      window.requestAnimationFrame(this.drawFrame, this.canvas);
      this.context.clearRect(0, 0, this.width, this.height);
      this.drawBottomCircle();
      this.drawTopFillPath(this.tempRatio);
      // this.drawTopFillBall();
      this.fillTextContent(this.tempRatio);
    },
    gradientColor(startColor, endColor, step) {
      let startR = startColor[0];
      let startG = startColor[1];
      let startB = startColor[2];

      let endR = endColor[0];
      let endG = endColor[1];
      let endB = endColor[2];

      let sR = (endR - startR) / step;
      let sG = (endG - startG) / step;
      let sB = (endB - startB) / step;

      var colorArr = [];
      for (var i = 0; i < step; i++) {
        var hex = this.colorHex(
          "rgb(" +
            parseInt(sR * i + startR) +
            "," +
            parseInt(sG * i + startG) +
            "," +
            parseInt(sB * i + startB) +
            ")"
        );
        colorArr.push(hex);
      }
      return colorArr;
    },
    gradientColorAlpha(startColor, endColor, startAlpha, endAlpha, step) {
      let startR = startColor[0];
      let startG = startColor[1];
      let startB = startColor[2];

      let endR = endColor[0];
      let endG = endColor[1];
      let endB = endColor[2];

      let sR = (endR - startR) / step;
      let sG = (endG - startG) / step;
      let sB = (endB - startB) / step;
      let sA = (endAlpha - startAlpha) / step;

      var colorArr = [];
      for (var i = 0; i < step; i++) {
        // var hex = this.colorHex(
        //   "rgba(" +
        //     parseInt(sR * i + startR) +
        //     "," +
        //     parseInt(sG * i + startG) +
        //     "," +
        //     parseInt(sB * i + startB) +
        //     ", " +
        //     (sA * i + startAlpha) +
        //     ")"
        // );
        var hex =
          "rgba(" +
          startR +
          "," +
          startG +
          "," +
          startB +
          ", " +
          (sA * i + startAlpha) +
          ")";
        console.log("hex = ", hex);
        colorArr.push(hex);
      }
      return colorArr;
    },
    colorHex(rgb) {
      var _this = rgb;
      var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
      if (/^(rgb|RGB)/.test(_this)) {
        var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
        var strHex = "#";
        for (var i = 0; i < aColor.length; i++) {
          var hex = Number(aColor[i]).toString(16);
          hex = hex < 10 ? 0 + "" + hex : hex;
          if (hex === "0") {
            hex += hex;
          }
          strHex += hex;
        }
        if (strHex.length !== 7) {
          strHex = _this;
        }
        return strHex;
      } else if (reg.test(_this)) {
        var aNum = _this.replace(/#/, "").split("");
        if (aNum.length === 6) {
          return _this;
        } else if (aNum.length === 3) {
          var numHex = "#";
          for (let i = 0; i < aNum.length; i += 1) {
            numHex += aNum[i] + aNum[i];
          }
          return numHex;
        }
      } else {
        return _this;
      }
    },
  },
};
</script>
<style scoped>
.canvas_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  zoom: 0.55;
  width: 100%;
  height: 280px;
  background: rgb(200, 200, 200);
}
.canvas_area .canv {
  background: transparent;
}
</style>
